<template>
  <!-- 外层容器 -->
  <el-container>
    <!-- header开始 -->
    <el-header style="background-color:#eff2f7" class="top">
      <!-- header面包屑开始 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- header面包屑结束 -->
      <!-- header右侧头像开始 -->
      <div class="block">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <div class="poputs">
          <div @click="tzHome">首页</div>
          <div @click="tzLogin">退出</div>
        </div>
      </div>
      <!-- header右侧头像结束 -->
    </el-header>
    <!-- header结束 -->
    <!-- main部分开始 -->
    <el-main style="background-color:#fff" class="main">
      <!-- 数据统计部分开始 -->
      <div class="title">数据统计</div>
      <div class="data">
        <div class="data-day">
          <div class="data-item data-item-orange data-item-head">当日数据：</div>
          <div class="data-item">
            <span class="data-item-num">14</span>新增用户
          </div>
          <div class="data-item">
            <span class="data-item-num">6</span>新增订单
          </div>
          <div class="data-item">
            <span class="data-item-num">54</span>新增管理员
          </div>
        </div>
        <div class="div-all">
          <div class="data-item data-item-blue data-item-head">总数据：</div>
          <div class="data-item">
            <span class="data-item-num">31231</span>注册用户
          </div>
          <div class="data-item">
            <span class="data-item-num">43872</span>订单
          </div>
          <div class="data-item">
            <span class="data-item-num">52124</span>管理员
          </div>
        </div>
      </div>
      <!-- 数据统计部分结束 -->
      <!-- echarts图表开始 -->
      <div id="main"></div>
      <!-- echarts图表结束 -->
    </el-main>
    <!-- main部分结束 -->
  </el-container>
</template>

<script>

// 1.导入echarts
import echarts from "echarts";

export default {
  data() {
    return {
      circleUrl:
        "https://img01.sogoucdn.com/app/a/100520093/fb41c7c77a2454f7-01eba5833e7e38bc-11cc0200d4b834a0dddb28091fd46806.jpg",
    };
  },
  methods:{
    tzHome(){
      this.$router.push({path:'/home'});
    },
    tzLogin(){
      this.$router.push({path:'/login'});
    }
  }
  ,
  mounted() {
    // 初始化图表
    var myChart = echarts.init(document.getElementById("main"));

    //图表数据
    var option = {
      title: {
        text: "用户",
      },
      tooltip: {
        trigger: "axis",
      },
      // 图表对象
      legend: {
        data: ["新注册用户", "新增订单", "新增管理员"],
      },
      // 图表距离容器的偏移量
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      // 方法
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          // 数据视图
          dataView: {
            readOnly: false,
          },
          // 切换图表
          magicType: {
            type: ["line", "bar"],
          },
          //还原
          restore: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        // x轴
        data: [
          "2020-08-19",
          "2020-08-20",
          "2020-08-21",
          "2020-08-22",
          "2020-08-23",
          "2020-08-24",
          "2020-08-25",
        ],
      },
      yAxis: {
        type: "value",
      },
      // y轴
      series: [
        {
          name: "新注册用户",
          type: "line",
          stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "新增订单",
          type: "line",
          stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "新增管理员",
          type: "line",
          stack: "总量",
          data: [150, 232, 201, 154, 190, 330, 410],
        },
      ],
    };

    // 利用刚才的配置项和数据展示图表
    myChart.setOption(option);

    /* this.$axios.get("https://elm.cangdu.org/v1/users/count").then((res) => {
      this.num = res.data.count;
      // console.log(res);
      this.myChart = echarts.init(document.getElementById("visitorpie"));
      this.initData();
    });
    this.$axios.get("https://elm.cangdu.org/bos/orders/count").then((res) => {
      this.sum = res.data.count;
      // console.log(res);
    }); */
  },
};
</script>
<style scoped>
.title {
  width: 100%;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 36px;
  color: #000;
  margin: 10px 0 20px;
}
.block {
  position: relative;
}
.poputs {
  position: absolute;
  top: 55px;
  left: -20px;
  width: 80px;
  height: 60px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 2px 3px 10px -1px #333;
  display: none;
  z-index: 999;
}
.block:hover .poputs {
  display: block;
}
.poputs > div {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #000;
  cursor: pointer;
}
.poputs > div:hover {
  background-color: #e4e8f1;
  color: #333;
}
.data {
  width: 100%;
  height: 100px;
  margin-top: 40px;
}
.data > div {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}
.data-item {
  width: 240px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  float: left;
  margin-left: 30px;
  background-color: #e5e9f2;
  border-radius: 6px;
  font-size: 14px;
}
.data-item-orange {
  background-color: #ff9800;
  margin-left: 100px;
}
.data-item-blue {
  background-color: #54a5e8;
  margin-left: 100px;
}
.data-item-head {
  font-size: 22px;
  color: #fff;
}
.data-item-num {
  font-size: 26px;
  color: #333;
  display: inline-block;
  margin-right: 5px;
}
#main {
  width: 1000px;
  height: 500px;
  margin: 50px auto 0;
}
.el-menu-item-group__title{
  padding-left: 0px!important;
}
/* .el-menu-item{
  background-color: red!important;
} */
</style>